<template>
  <div class="container">
    <h1>
      新闻管理
      <button @click="isShow=!isShow" class="btn btn-success pull-right">新增</button>
    </h1>
    <hr />
    <!-- 新闻搜索 -->
    <div class="well">
      <div class="form-group">
        <input v-model="keywords" type="text" placeholder="请输入搜索关键词" class="form-control" />
      </div>
    </div>
    <!-- 新闻列表 -->
    <!-- 自定义属性 -->
    <!-- 第一步:  -->
    <List :newsList="result" @showModal="showModal" @delNews="delNews"/>

    <!-- 模态框(新增/编辑) -->
    <!-- 注册自定义事件 -->
    <Modal v-show="isShow" @getInfo="getInfo" @showModal="showModal"/>
    <!-- 模态框(新增/编辑) -->
  </div>
</template>

<script>
// 导入子组件
import List from "./List";
import Modal from "./Modal";
export default {
  components: {
    List,
    Modal
  },
  data() {
    return {
      // 控制模态框的显示状态
      isShow: false,
      // 搜索关键词
      keywords: "",
      // 新闻列表
      newsList: [
        {
          id: 2,
          title: "娱乐大事件",
          content:
            "娱乐大事件娱乐大事件娱乐大事件娱乐大事件娱乐大事件娱乐大事件"
        },
        {
          id: 1,
          title: "军事新闻",
          content:
            "军事新闻军事新闻军事新闻军事新闻军事新闻军事新闻军事新闻军事新闻"
        }
      ]
    };
  },
  computed: {
    // 使用keyword对newsList进行过滤
    result() {
      const list = this.newsList.filter(item => {
        // indexOf查找实参字符串是否包含目标字符串中, 如果包含, 则返回其在目标字符串中的位置信息
        if (item.title.indexOf(this.keywords) !== -1) {
          return true;
        }
      });
      return list;
    }
  },
  methods: {
    // 自定义事件处理方法
    getInfo(obj, isShow) {
      // 将子组件传递过来的新闻数据插入到newsList新闻数组的开头
      // 如果modal组件传递过来的新闻对象, 没有id, 则表示要新增一条新闻, 否则就是编辑操作
      // 新增新闻
      if (obj.id === "") {
        const id = this.newsList.length > 0 ? this.newsList[0].id + 1 : 1;
        this.newsList.unshift({
          ...obj,
          id
        });
      }else{  // 编辑新闻
        // 根据id查找新闻索引
        const index=this.newsList.findIndex(item=>item.id===obj.id);
        this.newsList[index].title=obj.title;
        this.newsList[index].content=obj.content;
      }

      // 关闭关闭模态框
      this.isShow = isShow;
    },
    // 自定义事件(showModal)处理函数
    showModal(isShow) {
      this.isShow = isShow;
    },
    // 自定义事件(delNews)处理函数
    delNews(id){
      // 通过id查找索引
      const index=this.newsList.findIndex(item=>item.id===id);
      this.newsList.splice(index,1);
    }
  }
};
</script>

<style>
</style>